<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <a th:href="@{/create/file/list}"
           class="btn btn-default pull-right" style="margin-right: 10px">
            <span class="Bold">取消</span>
        </a>
        <a id="btn-save" shiro:hasPermission="production:list:cha" href="javascript:void(0);"
           class="btn btn-success pull-right" style="margin-right: 10px">
            <span class="Bold"> 保存</span>
        </a>
    </div>
    <div class="row">
        <form id="sheetForm" class="form-horizontal">
            <div class="col-xs-11 col-xs-offset-1">
                <input type="hidden" name="id" id="makeSheetId" th:value="${fileSheet.id}">
                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td colspan="14">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="14" style="font-size: 16px;letter-spacing: 4px;">
                            存档清单变更单
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="3" style="width: 8%">项目编号</td>
                        <td style="width: 11%;font-size: 14px;">
                            <input id="sheetForm-proCode" type="text" class="form-control" name="proCode"
                                   th:value="${fileSheet.proCode}" readonly>
                        </td>
                        <td style="width: 8%">项目名称</td>
                        <td colspan="3" style="width: 21%">
                            <input id="sheetForm-proName" type="text" class="form-control" name="proName"
                                   th:value="${fileSheet.proName}" readonly>
                        </td>
                        <td style="width: 8%">项目数量</td>
                        <td style="width: 6%">
                            <input id="sheetForm-proNum" type="number" class="form-control" name="proNum"
                                   th:value="${fileSheet.proNum}" readonly>
                        </td>
                        <td style="width: 6%">类型</td>
                        <td style="width: 9%">
                            <input id="sheetForm-malType" type="text" class="form-control" name="special"
                                   th:value="${fileSheet.special}" readonly>
                            <input type="hidden" th:value="${fileSheet.specialId}" name="specialId">
                        </td>
                        <td style="width: 6%">部分</td>
                        <td style="width: 12%">
                            <input id="sheetForm-part" type="text" class="form-control error" name="part"
                                   th:value="${fileSheet.part}" readonly>
                            <input type="hidden" th:value="${fileSheet.partId}" name="partId">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="width: 4%">序号</td>
                        <td colspan="6">名称</td>
                        <td style="width: 12%">纸质版数量（页）</td>
                        <td colspan="2">电子版数量（件）</td>
                        <td colspan="4">备注</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="out">
                    <tr th:each="plan : ${filePlan}" th:class="${planStat.index == 0 ? 'after-tr' : ''}">
                        <td th:text="${planStat.count}"></td>
                        <td colspan="6">
                            <input type="hidden" name="filePlanId" th:value="${plan.id}">
                            <input type="hidden" name="cacheDelId" value="0">
                            <input style="text-align:left;" type="text" class="form-control" name="fileName"
                                   th:value="${plan.fileName}" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" step="0.1" class="form-control" name="pageNum"
                                   th:value="${plan.pageNum}" autocomplete="off">
                        </td>
                        <td colspan="2">
                            <input type="number" step="0.1" class="form-control" name="picecNum" th:value="${plan.picecNum}"
                                   autocomplete="off">
                        </td>
                        <td colspan="4">
                            <input type="text" class="form-control" name="remark" th:value="${plan.remark}"
                                   autocomplete="off">
                        </td>
                        <td th:if="${planStat.count} < 25">
                        </td>
                        <td th:if="${planStat.count} == 25">
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                        </td>
                        <td th:if="${planStat.count} > 25">
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-10 col-xs-offset-1" style="font-size: 14px;line-height: 200%;">
                <div class="col-xs-3" style="padding-left: 0">提报人： [[${session.user.name}]]</div>
                <div class="col-xs-3 bottom form-inline">联系电话：
                    <input class="form-control" style="width:60%;border: none;border-bottom: 1px solid #000;"
                           type="text" name="postTel" th:value="${fileSheet.postTel}">
                </div>
            </div>
        </form>
    </div>

</section>
<div th:include="include :: footer"></div>
<script th:src="@{/plugin/SheetJs/xlsx.core.min.js}"></script>
<script th:inline="javascript">
    let tempUrl, trAutoIndex = 9999, dynamicId = 0, orderNum, pidNum;

    /** 计算表格序号 */
    function computerNo() {
        $("table tbody tr").each(function (i, e) {
            $(this).children("td:first").text(i + 1);
        });
    }

    $(function () {

        let makeTypeHtml = $("#div-makeType").html();
        /** 添加一行 */
        $("#sheetForm").on('click', '.out-add', function () {
            $(this).parents("tr").after(`
                    <tr>
                        <td></td>
                        <td colspan="6">
                            <input type="hidden" name="filePlanId" value="0">
                            <input type="hidden" name = "cacheDelId" value="0">
                            <input style="text-align:left;" type="text" class="form-control" name="fileName" autocomplete="off" >
                        </td>
                        <td>
                            <input type="number" min="0" class="form-control" name="pageNum" autocomplete="off">
                        </td>
                         <td colspan="2">
                            <input type="number" min="0" class="form-control" name="picecNum" autocomplete="off">
                        </td>

                        <td colspan="4">
                            <input type="text" class="form-control" name="remark" autocomplete="off"  >
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
            `);
            computerNo();
        });


        /** 删除行 */
        $('#sheetForm').on('click', '.out-del', function () {
            let $this = $(this);
            let id = $(this).parents("tr").find("input[name=filePlanId]").val();
            if (id != 0) {
                $this.parents("tr").find("input[name=cacheDelId]").attr("value", 1);
                $this.parents("tr").remove();
            } else {
                $this.parents("tr").remove();
            }
            computerNo();
        });


        /** 保存计划单 */
        $("#btn-save").click(function () {
            let $this = $(this);
            let res = js.vd({
                id: 'sheetForm',
                notEmpty: ['fileName', 'postTel']
            })
            if (!res) {
                return;
            }
            $this.attr('disabled', true);
            js.submit({
                formId: "sheetForm",
                url: ctx + 'create/file/list/modifyChangeSave',
                data: new FormData($("#sheetForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        location.href = ctx + "create/file/list";
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
            $this.removeAttr('disabled');
        });

    });
</script>
</body>
</html>
